<template>
  <div class="app-container">
    <!-- 输入表单 -->
    <el-form label-width="120px">
      <el-form-item label="故障类型">
        <el-select v-model="cpHitch.hitchType">
          <el-option :value="0" :label="'通讯故障'" />
          <el-option :value="1" :label="'网关故障'" />
          <el-option :value="2" :label="'配件故障'" />
          <el-option :value="3" :label="'主板故障'" />
          <el-option :value="4" :label="'过流'" />
          <el-option :value="5" :label="'过压'" />
          <el-option :value="6" :label="'电器短路'" />
          <el-option :value="7" :label="'线路老化'" />
          <el-option :value="8" :label="'类型无法确定'"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="充电站点">
        <el-select v-model="cpHitch.addressSite">
          <el-option
            value="广州天河体育西共享充电站"
            :label="'广州天河体育西共享充电站'"
          />
          <el-option
            value="广州天河石牌桥共享充电站"
            :label="'广州天河石牌桥共享充电站'"
          />
          <el-option
            value="广州天河华师共享充电站"
            :label="'广州天河华师共享充电站'"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="充电桩型号">
        <el-select v-model="cpHitch.chargingpileType">
          <el-option value="BNBXF_CDZ001" :label="'BNBXF_CDZ001'" />
          <el-option value="BNBXF_CDZ002" :label="'BNBXF_CDZ002'" />
          <el-option value="BNBXF_CDZ003" :label="'BNBXF_CDZ003'" />
        </el-select>
      </el-form-item>
      <el-form-item label="充电桩编号">
        <el-select v-model="cpHitch.number">
          <el-option value="20230329_01" :label="'20230329_01'" />
          <el-option value="20230329_02" :label="'20230329_02'" />
          <el-option value="20230329_03" :label="'20230329_03'" />
        </el-select>
      </el-form-item>
      <el-form-item label="发生时间">
        <el-date-picker
          v-model="cpHitch.regTime"
          type="datetime"
          placeholder="选择日期时间"
        ></el-date-picker>
      </el-form-item>
      <el-form-item label="详细地点" style="width: 600px">
        <el-input v-model="cpHitch.address"></el-input>
      </el-form-item>
      <el-form-item label="站点联络人" style="width: 250px">
        <el-input v-model="cpHitch.contacts"></el-input>
      </el-form-item>
      <el-form-item label="联络电话" style="width: 250px">
        <el-input v-model="cpHitch.contactsPhone"></el-input>
      </el-form-item>
      <el-form-item label="紧急程度">
        <el-select v-model="cpHitch.rank">
          <el-option :value="0" :label="'一般'" />
          <el-option :value="1" :label="'紧急'" />
          <el-option :value="2" :label="'加急'" />
          <el-option :value="3" :label="'超加急'" />
        </el-select>
      </el-form-item>
      <!-- <el-form-item label="状态">
        <el-select v-model="cpHitch.status">
          <el-option :value="0" :label="'登记'" />
        </el-select>
      </el-form-item> -->
      <el-form-item label="故障内容" style="width: 600px">
        <el-input type="textarea" autosize v-model="cpHitch.content"></el-input>
      </el-form-item>
      <el-form label-width="120px">
        <el-form-item label="资料附件">
          <el-upload
            :on-success="onUploadSuccessIdCard1"
            :on-remove="onUploadRemove"
            :multiple="false"
            :action="uploadUrl"
            :data="{ module: 'idCard' }"
            :limit="1"
            list-type="picture-card"
          >
            <i class="el-icon-plus"></i>
          </el-upload>
        </el-form-item>
      </el-form>
      <el-form-item label="处理人">
        <el-select v-model="cpHitch.person">
          <el-option value="李师傅" :label="'李师傅'" />
          <el-option value="黄师傅" :label="'黄师傅'" />
          <el-option value="韩师傅" :label="'韩师傅'" />
        </el-select>
      </el-form-item>
      <el-form-item label="预计完成时间">
        <el-date-picker
          v-model="cpHitch.estimate"
          type="datetime"
          placeholder="选择日期时间"
        ></el-date-picker>
      </el-form-item>
      <el-form-item label="任务内容" style="width: 600px">
        <el-input
          type="textarea"
          autosize
          v-model="cpHitch.assContent"
        ></el-input>
      </el-form-item>
      <el-form-item label="创建人" style="width: 250px">
        <el-input v-model="cpHitch.createPerson" disabled></el-input>
      </el-form-item>
      <el-form-item label="创建时间" style="width: 300px">
        <el-input v-model="cpHitch.createpersonTime" disabled></el-input>
      </el-form-item>
      <el-form-item>
        <router-link
          :to="'/charging-pile/hitch_manager'"
          style="margin-right: 5px"
        >
          <el-button type="default" size="small" style="margin-right: 50px">
            返回
          </el-button>
        </router-link>
        <el-button
          :disabled="saveBtnDisabled"
          type="primary"
          size="small"
          @click="save()"
        >
          保存 || 派发
        </el-button>
      </el-form-item>
    </el-form>
  </div>
</template>
<script>
//引入api模块
import listApi from '@/api/charging-pile/hitch_manage'
export default {
  data() {
    let BASE_API = process.env.BASE_API || 'http://localhost:8130'
    return {
      saveBtnDisabled: false, //是否禁用保存按钮，防止表单重复提交
      cpHitch: {
        hiddenImg: null,
        createpersonTime: null,
        createPerson: '张三',
      }, //积分等级对象
      // uploadUrl: BASE_API + '/api/oss/file/upload', //文件上传地址
      uploadUrl: BASE_API + '/api/oss/file/upload',
    }
  },
  created() {},

  mounted() {
    this.getNowTime() //进入页面调用该方法获取当前时间
    clearInterval(myTimeDisplay) //销毁之前定时器
    var myTimeDisplay = setInterval(() => {
      this.getNowTime() //每秒更新一次时间
    }, 1000)
  },
  methods: {
    getNowTime() {
      var date = new Date()
      var Month = this.addZero(date.getMonth() + 1)
      var Data = this.addZero(date.getDate())
      var Hours = this.addZero(date.getHours())
      var Minutes = this.addZero(date.getMinutes())
      var Seconds = this.addZero(date.getSeconds())
      var time =
        date.getFullYear() +
        '-' +
        Month +
        '-' +
        Data +
        ' ' +
        Hours +
        ':' +
        Minutes +
        ':' +
        Seconds
      this.cpHitch.createpersonTime = time
    },
    //根据自己的需求，看要不要在时间不大于10的时候在前面补0，如果需要直接this.addZero(date.getMinutes()),其它与之相同，如果不需要删掉addZero（）方法即可。
    //小于10的拼接上0字符串
    addZero(s) {
      return s < 10 ? '0' + s : s
    },

    //保存
    save() {
      //禁用保存按钮
      this.saveBtnDisabled = true
      listApi.save(this.cpHitch).then((response) => {
        this.$message.success(response.message)
        this.$router.push('/charging-pile/hitch_manager') //路由地址进行改变
      })
    },
    onUploadSuccessIdCard1(response, file) {
      this.onUploadSuccess(response, file, 'idCard')
    },
    onUploadSuccess(response, file, type) {
      if (response.code === 0) {
        console.log('进来了')
        this.cpHitch.hiddenImg = response.data.url
        //业务成功,填充borrower.borrowerAttachList列表
        // this.cpHitch.hiddenImg.push({
        //   // imageName: file.name,
        //   // imageUrl: response.data.url,
        //   // imageType: type,
        //   hiddenImg: response.data.url,
        // })
      } else {
        //业务失败
        this.$message.error(response.message)
      }
    },
    onUploadRemove(file, fileList) {
      console.log('fileList', fileList)
      console.log(file.response.data.url)
      listApi.onUploadRemove(file.response.data.url).then((res) => {
        console.log('远程删除文件成功', file)
      })
      //调用远程文件删除接口
      // this.$axios
      //   .$delete('/api/oss/file/removeFile?url=' + file.response.data.url)
      //   .then((response) => {
      //     console.log('远程删除文件成功', file)
      //   })
      //从this.borrower.borrowerAttachList列表中删除对象
      // this.cpHitch.hiddenImg = this.cpHitch.hiddenImg.filter(function (item) {
      //   return item.imageUrl != file.response.data.url
      // })
    },
  },
}
</script>
